import React from "./react";

// 渲染 字符串、 jsx、 类组件...

class SubCounter {
  componentWillMount() {
    console.log("子组件将要挂载");
  }
  componentDidMount() {
    console.log("子组件已挂载✔");
  }
  render() {
    return "嘿嘿"
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 1
    }
  }
  componentWillMount() {
    console.log("父组件将要挂载");
  }
  componentDidMount() {
    console.log("父组件已挂载✔");
  }
  render() {
    console.log('name:', this.props.name);
    // return this.state.number
    // return React.createElement(SubCounter, { name: 1 })
    return (
      <SubCounter />
    )
    /* return (<div className="container">
      <h1>
        <span>设备枚举示例</span>
      </h1>
    </div>) */
  }
}
/*
React.createElement(Counter, {
        name: "xixi"
});
      */

function say() {
  alert(1)
}

// let ele = <div>xiao</div> // jsx语法
let ele = React.createElement(
  'div',
  { name: 'xixi' },
  'hello',
  React.createElement('button', { onclick: say }, '123')
)
console.log('ele', ele);

React.render(
  /* 'hello' */
  ele,
  /* <Counter name="xixi"></Counter> */
  // React.createElement(Counter, {
  //   name: "xixi"
  // }),
  document.getElementById('root')
)